import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Text, View } from 'react-native';
import styles from '../style';
import Icon from './diyicon/IconFont';
const config = {
  ['tabHome']: 'shouye',
  ['tabFind']: 'icon_find',
  ['tabClassify']: 'kinds',
  ['tabShopping']: 'gouwuche',
  ['tabMine']: 'wodedangxuan'
};
const focusedConfig = {
  ['tabHome']: 'shouye',
  ['tabFind']: 'icon_find',
  ['tabClassify']: 'kinds',
  ['tabShopping']: 'gouwuche',
  ['tabMine']: 'wodedangxuan'
};
const propTypes = {
  focused: PropTypes.bool,
  title: PropTypes.string,
  tabIconName: PropTypes.string
};

class TabIcon extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    let iconPath = config[this.props.tabIconName];
    let focusedPath = focusedConfig[this.props.tabIconName];
    let color = this.props.focused ? '#000' : '#A0A0A0';
    return (
      <View style={styles.centerTitle}>
        <Icon
          style={{ marginVertical: 4 }}
          name={this.props.focused ? iconPath : focusedPath}
          size={16}
          color={color}
        />
        <Text style={{ fontSize: 9, color: color }}>{this.props.title}</Text>
      </View>
    );
  }
}
TabIcon.propTypes = propTypes;

export default TabIcon;
